<template>
	<div class="index">
		<div class="header">
			<!-- 店铺背景图 -->
			<img src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">

			<div class="content df">
				<div class="content_head df aic jcc">店铺头像</div>
				<div class="content_infor df fdc jcsb">
					<div class="shop">店铺名称</div>
					<div class="time">配送时间</div>
					<div class="active">优惠活动</div>
				</div>
			</div>

			<div class="bottom df aic jcc">
				公告内容公告内容公告内容公告内容公告内容公告内容
			</div>
		</div>

		<div class="list df" v-for="item in goodList" :key="item.id">
			<img :src="item.imgUrl" alt="" class="fn">
			<div>
				<div class="list_title">{{item.name}}</div>
				<div class="list_infor">¥{{item.price}}</div>
				<div class="list_goods df fw">
					<div v-for="(v,i) in house.list" :key="i">
						{{v}}
					</div>
				</div>
				<div class="list_price">{{item.goodsDesc}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// 数据
		data() {
			return {

				// 商品列表
				goodList: [],

				//当前页
				page: 1,
				// 每页数据条数
				pagesize: 5,
			}
		},

		// 方法
		methods: {
			// 获取商品列表
			async getList() {
				uni.request({
					method: "GET",
					url: "http://api.wm.v6g.cn/goods/list",
					data: {
						currentPage: this.page,
						pageSize: this.pagesize
					},
					header: {
						Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiY3RpbWUiOiIyMDIzLTA2LTI2VDA2OjU2OjIyLjAwMFoiLCJhY2NvdW50IjoiYWRtaW4iLCJwYXNzd29yZCI6IjEyMzQ1NiIsInVzZXJHcm91cCI6Iui2hee6p-euoeeQhuWRmCIsImltZ1VybCI6Imh0dHA6Ly9hcGkud20udjZnLmNuL2ltZ3MvMTY4ODM0NTU0NzY0Mi5wbmciLCJwaWQiOjEsImlhdCI6MTY5MDg2MTA1MywiZXhwIjoxNjkxNDY1ODUzfQ.w-YiXjwBsD4sbGvmiLJ9O2JqW9hwKRpbkGjmmi8nhc8', //自定义请求头信息
					},
					success: (res) => {
						this.goodList = [...this.goodList, ...res.data.data]
					}
				})
			},
		},

		// 创建前钩子函数
		onLoad() {
			this.getList()
		},

		// 下拉事件
		async onPullDownRefresh() {
			// 将page置位为1
			this.page = 1
			// 将houseList置为空
			this.goodList = []
			// 重新发送请求
			await this.getList()

			// 关闭下拉
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},

		// 触底事件
		onReachBottom() {
			// 有数据就继续发请求
			this.page += 1
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;

		.header {
			position: relative;

			img {
				width: 750rpx;
				height: 160px;
				filter: blur(3px);
			}

			.content {
				width: 690rpx;
				height: 80px;
				top: 40rpx;
				left: 40rpx;
				position: absolute;

				.content_head {
					width: 80px;
					height: 80px;
					background: #ffff;
					margin-right: 15px;
				}

				.content_infor {
					color: #fff;

					.shop {
						font-size: 20px;
						font-weight: bold;
					}

					.time {
						font-size: 16px;
					}

					.active {
						font-size: 14px;
					}
				}
			}

			.bottom {
				position: absolute;
				bottom: 4px;
				height: 40px;
				background: rgba(0, 0, 0, .5);
				font-size: 14px;
				width: 750rpx;
				color: #fff;
			}
		}
	}

	.list {
		padding: 20px 20px;
		border-bottom: 1px solid #eee;

		img {
			width: 140px;
			height: 90px;
			margin-right: 10px;
		}

		.list_title {
			font-weight: bold;
		}

		.list_infor {
			font-size: 16px;
			font-weight: bold;
			line-height: 30px;
			color: #f00;
		}

		.list_goods {
			font-size: 12px;

			div {
				padding: 2px;
				background: #edf0f3;
				border-radius: 3px;
				color: #899aad;
				margin: 0 3px 3px 0;

			}
		}

		.list_price {
			font-size: 12px;
			line-height: 24px;
			color: #999999
		}
	}
</style>